<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <filmItemVue
      v-for="item in list"
      :key="item.filmId"
      :title="item"
      :item="item"
    />
  </van-list>
</template>
<script>
export default {
  name: "coming-soon",
};
</script>
<script setup>
import { ref } from "vue";
import filmItemVue from "../../../component/film-item.vue";
import { getFilmList } from "../../../api/filmList";
import { useCityStore } from "../../../stores/city";

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const cityStore = useCityStore();
const cityId = cityStore.curCity.cityId;

let pageNum = 1; //第几页
let pageSize = 10; //每一页多少个数据
let pageTotal = 1; //总页数
const type = 2;

const onLoad = () => {
  //调用getFilmList接口
  getFilmList(cityId, pageNum, pageSize, type)
    .then((response) => {
      const {
        //将响应的数据解出来 解出需要的数据
        data: { films, total },
      } = response;
      list.value.push(...films);
      //将数组展开之后 push 进list
      pageTotal = Math.ceil(total / pageSize); //算出总页数
    })
    .finally(() => {
      loading.value = false;
      if (pageNum >= pageTotal) {
        //如果加载的总页数小于响应返回的总页数total 就继续渲染页面
        finished.value = true;
      } else {
        finished.value = false;
        pageNum++;
      }
    });
};
</script>
